面包屑组件需求
面包屑导航显示当前页面在路由层级中的位置，帮助用户理解页面层级关系并快速返回上级。
实现方案
基于 Vue Router 的 matched 属性获取当前路由的所有匹配路由记录：
<template>
<el-breadcrumb separator="/">
<el-breadcrumb-item
v-for="item in breadcrumbs"
:key="item.path"
:to="item.path"
>
{{ item.meta?.title || item.name }}
</el-breadcrumb-item>
</el-breadcrumb>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const breadcrumbs = computed(() => {
return route.matched
.filter(item => item.meta?.title)
.map(item => ({
path: item.path,
meta: item.meta,
name: item.name
}))
})
</script>
vue
路由配置要求
面包屑依赖路由的 meta.title 字段：
const routes = [
{
path: '/system',
meta: { title: '系统设置' },
children: [
{
path: 'user',
meta: { title: '用户管理' }
}
]
}
]
typescript
进阶功能
- 面包屑项可点击跳转到对应路由
- 最后一级面包屑为当前页面，不可点击
- 支持图标显示
- 支持过渡动画
↑